<template>
    <div class="bottombar">
      <div class="tuijian">
        <div class="contLeft">
          <div class="title">
            <h3>动态</h3>
            <el-button>+发动态</el-button>
          </div>
          <div class="dongtaiDetail">
              <div class="dongtaiItem" v-for="(item,index) in 30" :key="index">
                  <div class="top">
                      <div class="lefts">
                        <div class="left">
                          <img src="../../assets/sss1.png" alt="">
                        </div>
                        <div class="right">
                          <p>张三{{ index }}</p>
                          <p>11:00</p>
                        </div>
                      </div>
                      <div class="rights">
                        <el-button size="mini">关注</el-button>
                      </div>
                  </div>
                  <div class="bottom">
                      <div class="botItem">
                          <img src="../../assets/sss1.png" alt="">
                          <img src="../../assets/sss2.jpg" alt="">
                          <img src="../../assets/sss3.jpg" alt="">
                          <img src="../../assets/sss1.jpg" alt="">
                          <img src="../../assets/sss2.png" alt="">
                      </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="contRight">
            <div class="header">
                <img src="../../assets/sss2.png" alt="">
                <p>fly飞</p>
            </div>
            <div class="guanzhu">
              <div class="guanzhuItem">
                <p>8</p>
                <p>动态</p>
              </div>
              <div class="guanzhuItem">
                <p>20</p>
                <p>关注</p>
              </div>
              <div class="guanzhuItem">
                <p>100</p>
                <p>粉丝</p>
              </div>
            </div>
            <div class="title">
              <h3>热门话题</h3>
              <p>更多>></p>
            </div>
            <div class="rightCont">
              <div class="lefts" v-for="(item,index) in 30" :key="index">
                <div class="left">
                  <img src="../../assets/sss2.png" alt="">
                </div>
                <div class="right">
                  <p>我在拯救世界</p>
                  <p>2312人参与</p>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
            
        };
    },
  }
  </script>
  <style lang="scss" scoped>
   .tuijian{
      display:flex;
      width:calc(100vw - 230px);
      .contRight{
        .rightCont::-webkit-scrollbar {
          width: 0;
        }
        .rightCont{
          height:calc(100vh - 385px);
          overflow-y:auto;
          margin-left:10px;
          .lefts{
              display:flex;
              align-items:center;
              line-height:20px;
              border-bottom:1px solid #c0c0c0;
              .left{
                img{
                  width:50px;
                  height:50px;
                }
              }
              .right{
                margin-left:10px;
              }
            }
        }
        .title{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin:0 10px;
          border-bottom:1px solid #ff0000;
        }
        .guanzhu{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin:0 60px;
          .guanzhuItem{
            display:flex;
            align-items:center;
            margin-top:30px;
            flex-direction:column;
            p:nth-child(1){
              font-weight:700;
            }
            p:nth-child(2){
              margin-top:-10px;
            }
          }
        }
        .header{
          display:flex;
          align-items:center;
          justify-content:center;
          margin-top:50px;
          img{
            width:50px;
            height:50px;
            border-radius:50%;
          }
          p{
            margin-left:10px;
          }
        }
      }
      .contLeft{
        height:calc(100vh - 160px);
        width:calc(100vw - 500px);
        border-right:1px solid #f5f5f5;
        .dongtaiDetail::-webkit-scrollbar {
          width: 0;
        }
        .dongtaiDetail{
          height:100%;
          overflow-y:auto;
          .dongtaiItem{
            border-bottom:1px solid #f0f0f0;
            padding-bottom:10px;
            .bottom{
              margin:0 5px;
              .botItem{
                display:flex;
                flex-wrap:wrap;
                align-items:center;
                padding:10px;
                img{
                  margin:5px;
                  width:200px;
                  height:140px;
                }
              }
            }
            .top{
              display:flex;
              align-items:center;
              justify-content:space-between;
              margin:0 10px;
              .lefts{
                display:flex;
                align-items:center;
                line-height:20px;
                .left{
                  img{
                    width:50px;
                    height:50px;
                    border-radius:50%;
                  }
                }
                .right{
                  margin-left:10px;
                }
              }
            }
          }
        }
        .title{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin:0 10px;
          border-bottom:1px solid #ff0000;
        }
      }
      .contRight{
        width:500px;
        background-color:#f5f5f5;
      }
   }
  </style>
  